<template>
	<view class="content">
		<view class="header">
			<view class="tabs">
				<uv-tabs :list="tabsList" :current="current" lineColor="#1DB481" :inactiveStyle="{color:'#666666'}"
					:activeStyle="{color:'#121212'}" @click="tabsClick" :scrollable="false"></uv-tabs>
			</view>
		</view>
		<abnor v-if="list.length<=0"></abnor>
		<view class="box" v-if="list.length > 0">
			<view class="item" v-for="(item,index) in list" :key="item.id" @click="to(item.id,index)">
				<view class="left">
					<view class="orderNum font28">
						订单号：{{item.order_code}}
					</view>
					<view class="status font24 fontw">
						{{statusType[item.pay_type]}}
					</view>
				</view>
				<view class="info" v-for="(aitem,aindex) in item.order_goods" :key="aindex">
					<image class="pic" :src="aitem.goods_cover" mode="aspectFill"></image>
					<view class="infoBox">
						<view class="left">
							<view class="title font30 fontw">
								{{aitem.goods_name}}
							</view>
							<view class="num font26">
								x{{aitem.num}}
							</view>
						</view>
						<view class="time font24">
							预约时间：{{item.start_time}}
						</view>
						<view class="price font24">
							总计：<text class="font24 fontw" style="color: #E82F21;">¥</text><text class="font32"
								style="color: #E82F21;">{{item.pay_price}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				systemInfo: 0,
				page: 1,
				last_page: 1,
				list: [],
				tabsList: [{
					name: '待服务'
				}, {
					name: '服务中'
				}, {
					name: '已完成'
				}],
				current: 0,
				type: 2,
				statusType: {
					2: '待服务',
					6: '服务中',
					7: '已完成',
				},
			};
		},
		onLoad() {
			
		},
		onShow() {
			this.list = []
			this.getData()
		},
		onReachBottom() {
			if (this.page >= this.last_page) {
				uni.showToast({
					icon: 'error',
					title: '暂无更多',
					duration: 1000
				})
			} else {
				this.page = this.page + 1
				this.getData()
			}
		},
		methods: {
			async getData() {
				const data = await this.$api.shopowner.orderList({
					page: this.page,
					pay_type: this.type
				})
				this.last_page = data.last_page
				this.list = [...this.list, ...data.data]
			},
			tabsClick(e) {
				this.current = e.index
				this.list = []
				if (e.index == 0) {
					this.type = 2
				}
				if (e.index == 1) {
					this.type = 6
				}
				if (e.index == 2) {
					this.type = 7
				}
				this.getData()
			},
			to(id, current) {
				if (this.current == 0) {
					uni.navigateTo({
						url: '/technicianadd/pages/spring/spring?id=' + id
					})
				}
				if (this.current == 1) {
					uni.navigateTo({
						url: '/technicianadd/pages/spring/spring?id=' + id + '&current=' + current
					})
				}
				if(this.current == 2){
					uni.navigateTo({
						url: '/technicianadd/pages/detail/detail?id=' + id
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {

		.header {
			display: flex;
			justify-content: center;
			padding: 18rpx 0;
			background-color: #fff;
			position: sticky;
			top: 0;
		}

		.box {
			padding: 20rpx;

			.item {
				padding: 30rpx;
				background-color: #fff;
				border-radius: 16rpx;
				margin-bottom: 18rpx;

				.left {
					justify-content: space-between;
					padding-bottom: 30rpx;

					.orderNum {
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						max-width: 450rpx;
						color: #232A24;
					}

					.status {
						color: #9ade97;
					}
				}

				.info {
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					.pic {
						width: 155rpx;
						height: 155rpx;
						border-radius: 16rpx;
					}

					.infoBox {
						flex: 1;
						margin-left: 20rpx;

						.left {
							padding-bottom: unset;

							.title {
								display: block;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								max-width: 400rpx;
								color: #232A24
							}

							.num {
								color: #3D2C1B;
							}
						}

						.time {
							color: #999999;
						}

						.price {
							color: #999999;
							display: flex;
							align-items: center;
						}
					}

				}
			}
		}
	}
</style>